<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="发货时间" prop="send_time">
        <el-date-picker
          v-model="queryParams.send_time"
          type="date"
          placeholder="选择发货时间"
          clearable
          value-format="YYYY-MM-DD"
        >
        </el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="发货时间" align="center" prop="send_time" />
			<el-table-column label="发货订单数" align="center" prop="send_num" />
			<el-table-column label="无轨迹" align="center">
				<template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.no_trajectory }}</el-link>
        </template>
			</el-table-column>
			<el-table-column label="已揽收" align="center">
        <template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.received }}</el-link>
        </template>
      </el-table-column>
			<el-table-column label="在途中" align="center">
        <template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.on_the_way }}</el-link>
        </template>
      </el-table-column>
			<el-table-column label="已签收" align="center">
        <template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.signed_for }}</el-link>
        </template>
      </el-table-column>
			<el-table-column label="问题件" align="center">
				<template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.problem }}</el-link>
        </template>
			</el-table-column>
			<el-table-column label="其他" align="center">
        <template #default="{ row }">
          <el-link type="primary" @click="onOpenDialog(row)">{{ row.other }}</el-link>
        </template>
      </el-table-column>
			<!-- <el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
				</template>
			</el-table-column> -->
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>

    <logisticsGoodStatisticsDialog ref="logisticsGoodStatisticsRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { logisticsStatisticsApi } from '/@/api/admin1';
import logisticsGoodStatisticsDialog from './dialog/logisticsGoodStatisticsDialog.vue';

const LogisticsStatisticsApi = logisticsStatisticsApi();
export default {
	name: 'logisticsStatistics',
  components: {
    logisticsGoodStatisticsDialog,
  },
	setup() {
		const queryFormRef = ref(null);

    const logisticsGoodStatisticsRef = ref(null);

		const state = reactive({
			queryParams: {
				send_time: '',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_logisticsStatisticsList(state.queryParams);
		};
    // 查看统计
    // 状态 0：无轨迹、1：已揽收、2：在途中、3：已签收:4：问题件、5：其他
    const onOpenDialog = (row: any) => {
      (logisticsGoodStatisticsRef.value as any)?.openDialog({ ...row })
    };

		/********** 网络事件 **********/
		// 物流统计列表
		const _logisticsStatisticsList = (_data: object) => {
			LogisticsStatisticsApi.logisticsStatisticsList(_data)
				.then((res: any) => {
					console.log(res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};
		
		return {
			queryFormRef,
      logisticsGoodStatisticsRef,
      onOpenDialog,
			onQuery,
			onResetQuery,
			getList,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
